import React, { FC } from 'react'
import QuestionCard from '../../../components/QuestionCard/QuestionCard'
import ListSearch from '../../../components/ListSearch/ListSearch'
import styles from './index.module.scss'
import { Typography, Spin } from 'antd'
import useLoadQuestionListData from '../../../hooks/useLoadQuestionListData'
const { Title } = Typography
import ListPage from '../../../components/ListPage'
const List: FC = () => {
  const { data = {}, loading } = useLoadQuestionListData()
  const { list = [], total = 0 } = data
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>我的问卷</Title>
        </div>
        <div className={styles.right}>
          <ListSearch></ListSearch>
        </div>
      </div>
      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin></Spin>
          </div>
        )}

        {!loading &&
          list.length > 0 &&
          list.map((q: any) => {
            const { _id } = q
            return <QuestionCard key={_id} {...q}></QuestionCard>
          })}
      </div>
      <div className={styles.footer}>
        <ListPage total={total}></ListPage>
      </div>
    </>
  )
}
export default List
